import { useEffect } from "react";
import Time from "../components/Time";
import customSvg from "./customSvg";
const LogIcon = customSvg["LogIcon"];
const UsbIcon = customSvg["UsbIcon"];
const NetWorkIcon = customSvg["NetWorkIcon"];
const MediaIcon = customSvg["MediaIcon"];
const BaseIcon = customSvg["BaseIcon"];
const TempIcon = customSvg["TempIcon"];

export default function Footer() {
  useEffect(() => {
    console.log("Footer函数组件来咯");
  }, []);
  
  const handleMenuClick = (key) => {
    console.log("点击了", key);
  };

  return (
    <div className="w-full h-full flex items-center justify-between bg-head-bg custom-shadow">
      <div className=" h-full w-96"></div>
      <div className=" h-full flex-auto"></div>
      <div className="h-full flex">
        <div className=" flex h-full mr-12">
          <div
            className=" flex h-full items-center px-2 py-4 cursor-pointer text-[#dbdbdb] hover:text-[#00ffff]"
            onClick={() => handleMenuClick("log")}
          >
            <LogIcon />
          </div>
          <div
            className=" flex h-full items-center px-2 py-4 cursor-pointer text-[#dbdbdb] hover:text-[#00ffff]"
            onClick={() => handleMenuClick("usb")}
          >
            <UsbIcon />
          </div>
          <div
            className=" flex h-full items-center px-2 py-4 cursor-pointer text-[#dbdbdb] hover:text-[#00ffff]"
            onClick={() => handleMenuClick("media")}
          >
            <MediaIcon />
          </div>
          <div
            className=" flex h-full items-center px-2 py-4 cursor-pointer text-[#dbdbdb] hover:text-[#00ffff]"
            onClick={() => handleMenuClick("network")}
          >
            <NetWorkIcon />
          </div>
          <div
            className=" flex h-full items-center px-2 py-4 cursor-pointer text-[#dbdbdb] hover:text-[#00ffff]"
            onClick={() => handleMenuClick("base")}
          >
            <BaseIcon />
          </div>
          <div
            className=" flex h-full items-center px-2 py-4 cursor-pointer text-[#dbdbdb] hover:text-[#00ffff]"
            onClick={() => handleMenuClick("temp")}
          >
            <TempIcon />
          </div>
        </div>
        <Time></Time>
      </div>
    </div>
  );
}
